<html>
    <head>
        <title>Test</title>
        <style>

@import url(../../widgets/file-selector/folder-view.css);

body { flow: horizontal; border-spacing: 1em;}

lottie {
  width:300dip;
  height:300dip;
}

section.lottie-player {
  width: max-content;
  border:1dip solid #ccc;
}

section.lottie-player > toolbar {
  line-height:1.6em;
}

section.lottie-player > toolbar > button.play {
  height:*;
  width:2em;
  background-image: url(path:M1312 896q0 37-32 55l-544 320q-15 9-32 9-16 0-32-8-32-19-32-56v-640q0-37 32-56 33-18 64 1l544 320q32 18 32 55zm128 0q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z);
  background-size: 1.6em;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  fill: #000;
}

section.lottie-player > toolbar > button.play:checked {
  background-image: url(path:M896 128q209 0 385.5 103t279.5 279.5 103 385.5-103 385.5-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103zm0 1312q148 0 273-73t198-198 73-273-73-273-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73zm96-224q-14 0-23-9t-9-23v-576q0-14 9-23t23-9h192q14 0 23 9t9 23v576q0 14-9 23t-23 9h-192zm-384 0q-14 0-23-9t-9-23v-576q0-14 9-23t23-9h192q14 0 23 9t9 23v576q0 14-9 23t-23 9h-192z);
}

section.lottie-player > toolbar > input {
  display:block;
  width:100px;
  margin:0 *;
}

section.lottie-player > toolbar > output {
  display:block;
  min-width:2em;
}

#files {
  display:block;
  width:20em;
  height:*;
}

        </style>
        <script|module>

const ellottie = document.$("lottie");
const buttonplay = document.$("button.play");
const elposition = document.$("input.position");
const elframeno = document.$("output.frame-no");
const eltotalframes = document.$("output.total-frames");

document.on("file-activate", (e) => {
  ellottie.lottie.stop();
  ellottie.lottie.load( e.data );
  ellottie.lottie.play();
  buttonplay.value = true;
  ellottie.timer(32, showLottieState);
  return true;
});

function showLottieState() {
  
  elposition.value = ellottie.lottie.position;
  elframeno.value = ellottie.lottie.frame;
  eltotalframes.value = ellottie.lottie.frames;

  return ellottie.lottie.playing;
}

document.on("change", "button.play", (e,button) => {
  if( button.value ) {
    ellottie.lottie.play();
    ellottie.timer(32, showLottieState);
  }
  else
    ellottie.lottie.stop();
  return true;
});

document.on("change", "input.position", (e,input) => {
  buttonplay.value = false;
  ellottie.lottie.stop();
  ellottie.lottie.position = input.value;
  showLottieState();
});

        </script>
    </head>
    <body>

    <folder #files filter="*.json" path="lotties/" />  

    <section.lottie-player>
      <lottie loop />
      <toolbar>
        <button|checkbox.play />
        <input|hslider.position min="0.0" max="1.0" />
        <output.frame-no/><span>:</span>
        <output.total-frames/>
      </toolbar>
    </section>


    </body>
</html>